<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/revenue/transDetailTmpl.jsp"%>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>收入流水明细</title>
<link rel="stylesheet"
	href="${ctx}/static/plug/frozenui-1.3.0/css/frozen.css" media="all">
<link rel="stylesheet" href="${ctx}/static/css/user/register.css"
	media="all">
<script src="${ctx}/static/js/laydate/laydate.js"></script>
<style type="text/css">
.content {
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px
}

.selected-content {
	margin-top: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
	background-color: #469fe3;
	color: white;
	border-radius: 0px;
	border: 1px solid #469fe3
}

.unselected-content {
	margin-top: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
	background-color: #f8f8f8;
	color: #25282e;
	border-radius: 0px;
	border: 1px solid #469fe3
}

.select-li {
	border-radius: 0px;
	border: 1px solid #469fe3;
	font-size: 13px;
}

.select-date {
	border-radius: 0px;
	border: 1px solid #469fe3
}

.div-noUnpay {
	margin: 0px auto;
	text-align: center;
	color: #898989;
	padding-top: 10px;
	width: 100%
}

.ui-tab-nav {
	position: relative;
}
.ui-border-t{
	padding-left: 10px;
}
</style>
</head>
<body>

	<section class="ui-container" style="margin-top: 20px;">
		<div class="ui-tab ui-tab-revenue" id="tab1">
			<ul class="ui-tab-nav ui-border-b" style="">
				<li data-div="ulCashRevenue" class="current">现金收入</li>
				<li data-div="ulPlatformRevenue">网络收入</li>
			</ul>
			<ul class="ui-tab-content" style="width: 200%; padding-top: 0px">
				<li>
					<ul class="ui-list ui-list-pure ui-border-tb"
						style="height: 80%; overflow: auto;" id="ulCashRevenue"
						nowPage="1" type="1" tmpl="cashRevenueTmpl">
					</ul>
				</li>

				<li>
					<ul class="ui-list ui-list-pure ui-border-tb"
						style="height: 80%; overflow: auto;" id="ulPlatformRevenue"
						nowPage="1" type="2" tmpl="platformRevenueTmpl">
					</ul>
				</li>
			</ul>
		</div>
	</section>
	<section id="dialog">
		<div class="ui-dialog" id="div_dialog"></div>
	</section>
</body>
<script src="${ctx}/static/plug/frozenui-1.3.0/lib/zepto.min.js"></script>
<script src="${ctx}/static/plug/frozenui-1.3.0/js/frozen.js"></script>
<script>
	var paramObj = {
		"transDetailParams" : "${transDetailParams}",//查看详细收入流水
		"transDetailDataParam" : "${transDetailDataParam}"
	};

	$(function() {
		initDateSelected();
		var tab = new fz.Scroll('.ui-tab', {
			role : 'tab',
			autoplay : false,
			interval : 3000
		});

		/* 滑动开始前 */
		tab.on('beforeScrollStart', function(from, to) {
			initDateSelected();
		})

		/* 滑动结束 */
		tab.on('scrollEnd', function(curPage) {
			initDateSelected();
		});

		function initDateSelected() {
			var currentDiv = $(".current").attr("data-div");
			var chargeType = parseInt($("#" + currentDiv).attr("type"));
			console.log(chargeType);
			var paraObj = {
				"params" : paramObj.transDetailDataParam,
				"chargeType": chargeType
			};
			$.post("${action}", paraObj, function(obj) {
				if (obj.result) {
					var html="";
					var i=0;
					for (i = 0; i<obj.result .length; i++) {
						var data=obj.result[i];
						html+='<li class="ui-border-t"><div class="ui-row-flex" style="font-size: 17px;"><div class="ui-col ui-col-2"><span>'+data.carNo+'</span></div>'+
                        '<div class="ui-col" style="text-align: right; padding-right: 10px">￥'+(data.charge/10).toFloat(2)+'</div></div>'+
                        '<div class="ui-row-flex" style="margin-top: 3px"><div class="ui-col ui-col-2" ><h5 class="ui-txt-info">进场时间'+data.inTime+'</h5></div>'+
                    '<div class="ui-col" style="text-align: right; padding-right: 10px"><h5 class="ui-txt-info">停车卷:￥'+(data.couponMoney/10).toFloat(2)+'</h5></div></div>'+
                     '<div class="ui-row-flex"><div class="ui-col ui-col-2"><h5 class="ui-txt-info">进场时间'+data.outTime+'</h5></div>'+
                      '<div class="ui-col" style="text-align: right; padding-right: 10px"><h5 class="ui-txt-info">实际金额:<span>￥'+(data.needPayCharge/10).toFloat(2)+'</span></h5></div></div>';
                    }
					if(i>=20){
						html+='<li class="ui-border-t"><span style="font-size: 20px;">想要查看更多记录请前往PC客户端。。。</span></li>';
					}else{
						html+='<li class="ui-border-t"><span style="font-size: 20px;">没有记录了。。。</span></li>';
					}
                    $(".current").eq(1).html(html);
				} else {
					showTips("info", "获取业务数据失败");
				}
			});
		}
	});
</script>

</html>
